
<template>
    <div class="home-new">
        <div class="phone">
            <h1 :class="isShow ? 'mi-title-show' : ''"><span>小米</span> 让生活更精彩</h1>
            <img class="mi-phone" :class="isShow ? 'mi-phone-show' : ''" src="../../assets/mi_phone_nobg_shadow.png"
                alt="手机">
            <img class="mi-shadow" :class="isShow ? 'mi-shadow-show' : ''" src="../../assets/mi_phone_nobg.png"
                alt="阴影">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"

const isShow = ref<boolean>(false) // 显示图片

onMounted(() => {
    setInterval(() => {
        isShow.value = true
    }, 100)

}
)

</script>

<style scoped>
.home-new {

    width: 100vw;
    height: calc(100vh - 145px);
    background: linear-gradient(to left, #e6e6e6, #f0f0f0, #e6e6e6);
}

.phone {
    position: relative;

    width: 100%;
    height: 100%;


}

h1 {
    position: absolute;
    top: 0.8rem;

    width: 100%;
    text-align: center;
    font-size: 28px;
    opacity: 0;
    transform: scale(0);

 
}
h1  span {
        color: #ff6700;
    }

.phone .mi-title-show {
    opacity: 1;
    transform: scale(1);
    transition: all 1s;
}

.phone .mi-phone {
    position: absolute;
    top: 40vh;
    left: 50%;
    transform: translate(-50%, 150%);

    width: 98%;
    opacity: 0;
    z-index: 1;
}

.phone .mi-phone-show {
    transform: translate(-50%, 0);
    opacity: 1;
    transition: all 1s;
}

.phone .mi-shadow {
    position: absolute;
    top: 32vh;
    left: 50%;
    transform: translate(-50%, -150%);
    opacity: 0;

    width: 98%;
}

.phone .mi-shadow-show {
    transform: translate(-50%, 0);
    opacity: 1;
    transition: all 1s;
}</style>
